<template>
  <div class="list border-topbottom">
      <ul class="condition">
        <li class="list-span">
            <span class="list-text">院校所属</span><span class="iconfont">&#xe61f;</span>
            <div class="list-detail">
                <!-- <span  class=""  ></span> -->
                <button
                type="button"
                class=" list-item btn btn-outline-dark"
                v-for="item of list"
                :key="item"
                @click="handlebelongclick(item)"
                >
                {{item}}
                </button>
            </div >
        </li>
        <li class="list-span">
            <span class="list-text">院校类型</span><span class="iconfont">&#xe61f;</span>
            <div class="list-detail">
                <!-- <span  class="list-item" v-for="item of schooltype" :key="item" >{{item}}</span> -->
                <button
                type="button"
                class=" list-item btn btn-outline-dark"
                v-for="item of schooltype"
                :key="item"
                @click="handletypeclick(item)"
                >
                {{item}}
                </button>
            </div >
        </li>
        <li class="list-span">
            <span class="list-text">院校特色</span><span class="iconfont">&#xe61f;</span>
            <div class="list-detail">
                <!-- <span  class="list-item" >985</span>
                <span  class="list-item" >211</span>
                <span  class="list-item" >一流学科建设高校</span>
                <span  class="list-item" >一流大学建设高校A类</span>
                <span  class="list-item" >一流大学建设高校B类</span>
                <span  class="list-item" >教育部直属</span> -->
                <button type="button" class="list-item btn btn-outline-dark" @click="handlespecilclick()">全部</button>
                <button type="button" class="list-item btn btn-outline-dark" @click="handlespecilclick()">985</button>
                <button type="button" class="list-item btn btn-outline-dark" @click="handlespecilclick()">211</button>
                <button type="button" class="list-item btn btn-outline-dark" @click="handlespecilclick()">一流学科建设高校</button>
                <button type="button" class="list-item btn btn-outline-dark" @click="handlespecilclick()">A类</button>
                <button type="button" class="list-item btn btn-outline-dark" @click="handlespecilclick()">B类</button>
                <button type="button" class="list-item btn btn-outline-dark" @click="handlespecilclick()">教育部</button>
            </div >
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeList',
  props: {
    list: Array,
    schooltype: Array
  },
  methods: {
    handlebelongclick (item) {
      this.$emit('changebelong', item)
    },
    handletypeclick (item) {
      this.$emit('changetype', item)
    },
    handlespecilclick () {
      var el = event.currentTarget
      this.$emit('changespecil', el.innerHTML)
    }
  }
}
</script>

<style  scoped>
.list{
    margin-top: 18px;
    margin-left: 48px;
    width: 61%;
    padding-top: 1px;
}
.list-text{
    font-size: 25px;
}
.list-span{
    width: 100%;
    margin-top: 30px;
}
.list-detail{
    margin-left:50px;
    padding-top: 10px;
}
.list-item{
    margin-left: 18px;
    padding-top: 10px;

}
.btn{
    font-size: 15px;
}
</style>
